<template>
    <el-form class="mc-style" label-width="80px" label-position="left" :model="model" size="mini">
      <el-collapse accordion v-model="activeName">
        <el-collapse-item name="font">
           <template slot="title">
            <i class="header-icon el-icon-info">文字</i>
          </template>
          <div v-if="activeName=='font'">
            <el-form-item label="文本颜色">
              <el-color-picker @change="change" v-model="model.color"></el-color-picker><i class="el-icon-delete" @click="reset('color')"></i>
            </el-form-item>
            <el-form-item label="字体风格">
              <el-radio-group  @change="change" v-model="model['font-style']">
                <el-radio-button label="italic">斜体</el-radio-button>
                <el-radio-button label="oblique">倾斜</el-radio-button>
              </el-radio-group>
              <i class="el-icon-delete" @click="reset('font-style')"></i>
            </el-form-item>
            <el-form-item label="字体大小">
              <McUnit  @change="change" v-model="model['font-size']" size="mini"/>
              <i class="el-icon-delete" @click="reset('font-size')"></i>
            </el-form-item>
             <el-form-item label="行高">
              <McUnit  @change="change" v-model="model['line-height']" size="mini" :min="0"/>
               <i class="el-icon-delete" @click="reset('line-height')"></i>
             </el-form-item>
            <el-form-item label="字体加粗">
              <el-select  @change="change" v-model="model['font-weight']" placeholder="请选择">
                <el-option
                  v-for="item in fontWeightList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              <i class="el-icon-delete" @click="reset('font-weight')"></i>
            </el-form-item>
            <el-form-item label="水平对齐">
              <el-radio-group  @change="change" v-model="model['text-align']">
                <el-radio-button label="left">靠左</el-radio-button>
                <el-radio-button label="right">靠右</el-radio-button>
                <el-radio-button label="center">居中</el-radio-button>
                <el-radio-button label="justify">两端对齐</el-radio-button>
              </el-radio-group>
              <i class="el-icon-delete" @click="reset('text-align')"></i>
            </el-form-item>
            <el-form-item label="文本缩进">
              <McUnit   @change="change" v-model="model['text-indent']" /><i class="el-icon-delete" @click="reset('text-indent')"></i>
            </el-form-item>
            <el-form-item label="文字间距">
              <McUnit   @change="change" v-model="model['word-spacing']" size="mini"/>
              <i class="el-icon-delete" @click="reset('word-spacing')"></i>
            </el-form-item>
            <el-form-item label="字母间距">
              <McUnit   @change="change" v-model="model['letter-spacing']" size="mini"/>
              <i class="el-icon-delete" @click="reset('letter-spacing')"></i>
            </el-form-item>
            <el-form-item label="大小写">
              <el-radio-group  @change="change" v-model="model['text-transform']">
                <el-radio-button label="uppercase">大写</el-radio-button>
                <el-radio-button label="lowercase">小写</el-radio-button>
                <el-radio-button label="capitalize">大写字母开头</el-radio-button>
              </el-radio-group>
              <i class="el-icon-delete" @click="reset('text-transform')"></i>
            </el-form-item>
            <el-form-item label="文本装饰">
              <el-radio-group   @change="change" v-model="model['text-decoration']">
                <el-radio-button label="underline">下划线</el-radio-button>
                <el-radio-button label="line-through">中划线</el-radio-button>
                <el-radio-button label="overline">上划线</el-radio-button>
                <el-radio-button label="blink">闪烁</el-radio-button>
              </el-radio-group>
              <i class="el-icon-delete" @click="reset('text-decoration')"></i>
            </el-form-item>
            <el-form-item label="文本方向">
              <el-radio-group   @change="change" v-model="model.direction">
                <el-radio-button label="ltr">从左至右</el-radio-button>
                <el-radio-button label="rtl">从右至左</el-radio-button>
              </el-radio-group>
              <i class="el-icon-delete" @click="reset('direction')"></i>
            </el-form-item>
            <el-form-item label="空白处理">
              <el-radio-group   @change="change" v-model="model['white-space']">
                <el-radio-button label="pre-line">合并空白保留换行</el-radio-button>
                <el-radio-button label="nowrap">br换行</el-radio-button>
                <el-radio-button label="pre">保留空白</el-radio-button>
                <el-radio-button label="pre-wrap">保留空白保留换行</el-radio-button>
              </el-radio-group>
              <i class="el-icon-delete" @click="reset('white-space')"></i>
            </el-form-item>
            <el-form-item label="字体名称">
              <el-input   @change="change" class="w-80" v-model="model['font-family']" placeholder="请输入字体名称"/>
              <i class="el-icon-delete" @click="reset('font-family')"></i>
            </el-form-item>
          </div>
        </el-collapse-item>
        <el-collapse-item name="layout">
           <template slot="title">
            <i class="header-icon el-icon-s-grid">布局</i>
          </template>
          <div  v-if="activeName=='layout'">
            <el-form-item label-width="0px">
              <McBox   @change="change" :model="model"></McBox>
            </el-form-item>
            <el-form-item label="宽度">
              <McUnit   @change="change" v-model="model['width']"  size="mini" :min="0"/>
              <el-button type="primary" @click="reset('width','100%')">占满</el-button>
              <i class="el-icon-delete" @click="reset('width')"></i>
            </el-form-item>
            <el-form-item label="高度">
              <McUnit   @change="change" v-model="model.height" size="mini" :min="0"/>
              <el-button type="primary" @click="reset('height','100%')">占满</el-button>
              <i class="el-icon-delete" @click="reset('height')"></i>
            </el-form-item>
            <el-form-item label="浮动">
              <el-radio-group   @change="change" v-model="model.float">
                <el-radio-button label="left">靠左</el-radio-button>
                <el-radio-button label="right">靠右</el-radio-button>
              </el-radio-group>
              <i class="el-icon-delete" @click="reset('float')"></i>
            </el-form-item>
            <el-form-item label="盒子边框">
              <el-radio-group   @change="change" v-model="model['box-sizing']">
                <el-radio-button label="border-box">边框不影响宽高</el-radio-button>
                <el-radio-button label="content-box">边框影响宽高</el-radio-button>
              </el-radio-group>
              <i class="el-icon-delete" @click="reset('box-sizing')"></i>
            </el-form-item>
            <el-form-item label="定位">
              <el-radio-group   @change="change" v-model="model.position">
                <el-radio-button label="absolute">绝对-父元素</el-radio-button>
                <el-radio-button label="fixed">固定-浏览器</el-radio-button>
                <el-radio-button label="relative">相对-自身</el-radio-button>
                <el-radio-button label="static">顺序</el-radio-button>
              </el-radio-group>
              <i class="el-icon-delete" @click="reset('position')"></i>
            </el-form-item>
            <el-form-item label="偏移上">
              <McUnit   @change="change" v-model="model.top" size="mini"/>
              <i class="el-icon-delete" @click="reset('top')"></i>
            </el-form-item>
            <el-form-item label="偏移下">
              <McUnit   @change="change" v-model="model.bottom" size="mini"/>
              <i class="el-icon-delete" @click="reset('bottom')"></i>
            </el-form-item>
            <el-form-item label="偏移左">
              <McUnit   @change="change" v-model="model.left" size="mini"/>
              <i class="el-icon-delete" @click="reset('left')"></i>
            </el-form-item>
            <el-form-item label="偏移右">
              <McUnit   @change="change" v-model="model.right" size="mini"/>
              <i class="el-icon-delete" @click="reset('right')"></i>
            </el-form-item>
             <el-form-item label="最大宽度">
              <McUnit   @change="change" v-model="model['max-width']" size="mini" :min="0"/>
               <i class="el-icon-delete" @click="reset('max-width')"></i>
             </el-form-item>
             <el-form-item label="最大高度">
              <McUnit   @change="change" v-model="model['max-height']" size="mini" :min="0"/>
               <i class="el-icon-delete" @click="reset('max-height')"></i>
             </el-form-item>
            <el-form-item label="最小宽度">
              <McUnit   @change="change" v-model="model['min-width']" size="mini" :min="0"/>
              <i class="el-icon-delete" @click="reset('min-width')"></i>
            </el-form-item>
            <el-form-item label="最小高度">
              <McUnit   @change="change" v-model="model['min-height']" size="mini" :min="0"/>
              <i class="el-icon-delete" @click="reset('min-height')"></i>
            </el-form-item>
          </div>
        </el-collapse-item>
        <el-collapse-item name="flex">
           <template slot="title">
            <i class="header-icon el-icon-s-grid">FLEX布局</i>
          </template>
          <div v-if="activeName=='flex'">
            <el-card header="父容器">
              <el-form-item label="定位">
                <el-radio-group   @change="change" v-model="model.display">
                  <el-radio-button label="flex">FLEX</el-radio-button>
                  <el-radio-button label="block">块</el-radio-button>
                  <el-radio-button label="inline-block">内联块</el-radio-button>
                  <el-radio-button label="none">隐藏</el-radio-button>
                </el-radio-group>
                <i class="el-icon-delete" @click="reset('display')"></i>
              </el-form-item>
              <el-form-item label="孩子排列方向">
                <el-radio-group   @change="change" v-model="model['flex-direction']">
                  <el-radio-button label="row">从左往右</el-radio-button>
                  <el-radio-button label="row-reverse">从右往左</el-radio-button>
                  <el-radio-button label="column">从上往下</el-radio-button>
                  <el-radio-button label="column-reverse">从下往上</el-radio-button>
                </el-radio-group>
                <i class="el-icon-delete" @click="reset('flex-direction')"></i>
              </el-form-item>
              <el-form-item label="内部换行">
                <el-radio-group   @change="change" v-model="model['flex-wrap']">
                  <el-radio-button label="nowrap">不换行</el-radio-button>
                  <el-radio-button label="wrap">换行</el-radio-button>
                  <el-radio-button label="wrap-reverse">换行-首行靠下</el-radio-button>
                </el-radio-group>
                <i class="el-icon-delete" @click="reset('flex-wrap')"></i>
              </el-form-item>
              <el-form-item label="水平对齐">
                <el-radio-group   @change="change" v-model="model['justify-content']">
                  <el-radio-button label="flex-start">左对齐</el-radio-button>
                  <el-radio-button label="center">居中</el-radio-button>
                  <el-radio-button label="flex-end">右对齐</el-radio-button>
                  <el-radio-button label="space-between">两端对齐</el-radio-button>
                  <el-radio-button label="space-around">等间隔</el-radio-button>
                </el-radio-group>
                <i class="el-icon-delete" @click="reset('justify-content')"></i>
              </el-form-item>
              <el-form-item label="单行垂直对齐" v-if="!model['flex-wrap'] || model['flex-wrap']==='nowrap'">
                <el-radio-group   @change="change" v-model="model['align-items']">
                  <el-radio-button label="flex-start">顶部对齐</el-radio-button>
                  <el-radio-button label="center">居中</el-radio-button>
                  <el-radio-button label="flex-end">底部对齐</el-radio-button>
                  <el-radio-button label="stretch">占满高</el-radio-button>
                  <el-radio-button label="baseline">基于文字</el-radio-button>
                </el-radio-group>
                <i class="el-icon-delete" @click="reset('align-items')"></i>
              </el-form-item>
              <el-form-item label="多行垂直对齐" v-if="model['flex-wrap']==='wrap'||model['flex-wrap']==='wrap-reverse'">
                <el-radio-group   @change="change" v-model="model['align-content']">
                  <el-radio-button label="flex-start">顶部对齐</el-radio-button>
                  <el-radio-button label="center">居中</el-radio-button>
                  <el-radio-button label="flex-end">底部对齐</el-radio-button>
                  <el-radio-button label="space-between">两端对齐</el-radio-button>
                  <el-radio-button label="space-around">等间隔</el-radio-button>
                  <el-radio-button label="stretch">占满高</el-radio-button>
                </el-radio-group>
                <i class="el-icon-delete" @click="reset('align-content')"></i>
              </el-form-item>
            </el-card>
            <el-card header="子容器">
              <el-form-item label="排序">
                <McUnit   @change="change" v-model="model['order']"  size="mini" :min="-100" :max="100" :show-dw="false"/>
                <i class="el-icon-delete" @click="reset('order')"></i>
              </el-form-item>
              <el-form-item label="占比">
                <McUnit   @change="change" v-model="model['flex-grow']"  size="mini" :min="0" :max="100" :show-dw="false"/>
                <i class="el-icon-delete" @click="reset('flex-grow')"></i>
              </el-form-item>
              <el-form-item label="缩小比例">
                <McUnit   @change="change" v-model="model['flex-shrink']"  size="mini" :min="-100" :max="100" :show-dw="false"/>
                <i class="el-icon-delete" @click="reset('flex-shrink')"></i>
              </el-form-item>
              <el-form-item label="多余空间">
                <McUnit   @change="change" v-model="model['flex-basis']" size="mini"/>
                <i class="el-icon-delete" @click="reset('flex-basis')"></i>
              </el-form-item>
              <el-form-item label="垂直对齐">
                <el-radio-group   @change="change" v-model="model['align-self']">
                  <el-radio-button label="auto">自动</el-radio-button>
                  <el-radio-button label="flex-start">顶部对齐</el-radio-button>
                  <el-radio-button label="center">居中</el-radio-button>
                  <el-radio-button label="flex-end">底部对齐</el-radio-button>
                  <el-radio-button label="stretch">占满高</el-radio-button>
                  <el-radio-button label="baseline">基于文字</el-radio-button>
                </el-radio-group>
                <i class="el-icon-delete" @click="reset('align-self')"></i>
              </el-form-item>
            </el-card>
          </div>
        </el-collapse-item>

        <el-collapse-item name="bg">
           <template slot="title">
            <i class="header-icon el-icon-full-screen">背景</i>
          </template>
          <div v-if="activeName=='bg'">
            <el-form-item label="背景图">
                <el-input @change="change" type="textarea" rows="1" v-model="model['background-image']"></el-input>
                <el-upload style="display: inline-block" :action="uploadUrl" :on-success="successUpload" :show-file-list="false">
                  <el-button><i class="el-icon-upload"></i>上传</el-button>
                </el-upload>
              <i class="el-icon-delete" @click="reset('background-image')"></i>
            </el-form-item>
            <el-form-item label="背景宽高">
                <el-input   @change="change" class="w-80"  placeholder="100% 100%" v-model="model['background-size']"></el-input>
                <i class="el-icon-delete" @click="reset('background-size')"></i>
            </el-form-item>
            <el-form-item label="背景颜色">
              <el-color-picker   @change="change" v-model="model['background-color']"></el-color-picker>
              <i class="el-icon-delete" @click="reset('background-color')"></i>
            </el-form-item>
            <el-form-item label="背景重复">
              <el-radio-group   @change="change" v-model="model['background-repeat']">
                <el-radio-button label="repeat-x">水平重复</el-radio-button>
                <el-radio-button label="repeat-y">垂直重复</el-radio-button>
                <el-radio-button label="no-repeat">无</el-radio-button>
              </el-radio-group>
              <i class="el-icon-delete" @click="reset('background-repeat')"></i>
            </el-form-item>
            <el-form-item label="背景定位">
              <el-select   @change="change" v-model="model['background-position']" placeholder="请选择">
                <el-option
                  v-for="item in backgroundPositionList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              <i class="el-icon-delete" @click="reset('background-position')"></i>
            </el-form-item>
             <el-form-item label="背景连动">
              <el-radio-group   @change="change" v-model="model['background-attachment']">
                <el-radio-button label="scroll">跟随滚动</el-radio-button>
                <el-radio-button label="fixed">固定</el-radio-button>
              </el-radio-group>
               <i class="el-icon-delete" @click="reset('background-attachment')"></i>
             </el-form-item>
            <el-form-item label="透明度">
              <McUnit   @change="change" v-model="model['opacity']"  size="mini" :min="0" :max="1" :step="0.1" :show-dw="false"/>
              <i class="el-icon-delete" @click="reset('opacity')"></i>
            </el-form-item>
            <el-form-item label="层级关系">
              <McUnit   @change="change" v-model="model['z-index']" :show-dw="false"  size="mini" :min="0"/>
              <i class="el-icon-delete" @click="reset('z-index')"></i>
            </el-form-item>
             <el-form-item label="显示/隐藏">
              <el-radio-group   @change="change" v-model="model.display">
                <el-radio-button label="none">隐藏</el-radio-button>
                <el-radio-button label="inline">行内</el-radio-button>
                <el-radio-button label="block">块</el-radio-button>
              </el-radio-group>
               <i class="el-icon-delete" @click="reset('display')"></i>
             </el-form-item>
            <el-form-item label="背景渐变" v-if="false">
              <el-form-item label="开始颜色">
                <el-color-picker   @change="change" v-model="backgroundImage.startColor"></el-color-picker>
                <i class="el-icon-delete" @click="reset('startColor')"></i>
              </el-form-item>
              <el-form-item label="结束颜色">
                <el-color-picker   @change="change" v-model="backgroundImage.endColor"></el-color-picker>
                <i class="el-icon-delete" @click="reset('endColor')"></i>
              </el-form-item>
            </el-form-item>
          </div>
        </el-collapse-item>
      </el-collapse>
    </el-form>
</template>

<script>
import McUnit from './McUnit'
import McBox from './box/McBox'
export default {
    name:'mc-style',
    data(){
      return {
        // uploadUrl:this.$magicaltool.request.util.wrapServerName("/youyaboot-admin/magical_lowcode/openapi/upload"),
        uploadUrl:this.$magicaltool.request.util.wrapMagicalOpenapiUrl("magical_lowcode/manager/web/upload?prefix=code"),//编码阶段
        notifyOut:true,//通知外部变更
        firstRender:0,
        activeName:window['__mcTmpMcStyleActiveName']||"font",
         backgroundImage: {
            startColor: '',
            endColor: '',
        },
        fontWeightList: [
          {
            value:'lighter',
            label:'极细'
          },{
            value:'bold',
            label:'加粗'
          },
          {
            value:'bolder',
            label:'更粗'
          },{
            value:'100',
            label:'100'
          },{
            value:'200',
            label:'200'
          },{
            value:'300',
            label:'300'
          },{
            value:'400',
            label:'400'
          },{
            value:'500',
            label:'500'
          },{
            value:'600',
            label:'600'
          },{
            value:'700',
            label:'700'
          },{
            value:'800',
            label:'800'
          },{
            value:'900',
            label:'900'
          }
        ],
        backgroundPositionList: [
          {
            value:'center center',
            label:'居中'
          },
          {
            value:'left top',
            label:'靠上靠左'
          },
          {
            value:'center top',
            label:'靠上居中'
          },
          {
            value:'right top',
            label:'靠下靠右'
          },
          {
            value:'left center',
            label:'靠左居中'
          },
          {
            value:'right center',
            label:'靠右居中'
          },
          {
            value:'left bottom',
            label:'靠下靠左'
          },
          {
            value:'center bottom',
            label:'靠下居中'
          },
          {
            value:'right bottom',
            label:'靠下靠右'
          }
        ],
      }
    },
    components:{
      McUnit,
      McBox
    },
    props:{
        "model":{type:Object,default:{}}
    },
    watch :{
        /*model:{
          handler(newVal,oldVal){
            if(this.firstRender++>0){
              this.$emit("change",newVal);
            }
          },
          deep:true,immediate:true
       },*/
        backgroundImage:{//深度监听，可监听到对象、数组的变化
           handler(val, oldVal) {
             if(val.startColor !== null && val.startColor !== '' && val.startColor !== undefined ){
               if(val.endColor !== null && val.endColor !== '' && val.endColor !== undefined ){
                 this.model.backgroundImage = 'linear-gradient('+val.startColor+','+ val.endColor+')'
              }
             }
           },
           deep:true //true 深度监听
       },
       activeName(newVal,oldVal){
          window.__mcTmpMcStyleActiveName=newVal;
       }

    },
    mounted:function(){
      if(this.model['background-image']){
        this.model['background-image'] = this.model['background-image'].replace(/&quot;/g,"'");
      }
    },
    methods:{
      reset(cssName,value){
        this.$set(this.model,cssName,value||"")
        this.$emit("change",this.model);
      },
      change(){
        this.$emit("change",this.model)
      },
      //外部控制内部变化 而不通知外部
      innerChangeNotOutChange(newStyleObj){
        this.notifyOut = false;
        for(var key in this.model){
          this.$delete(this.model,key)
        }
        for(var key in newStyleObj){
          if(this.model[key]){
            this.model[key] = newStyleObj[key];
          } else{
            this.$set(this.model,key,newStyleObj[key]||"")
          }
        }
        /*this.$nextTick(()=>{//虚拟dom转化为真实dom后触发
            this.notifyOut = true;
        })*/

      },
      successUpload:function(res,file,fileList){
        var request = this.$magicaltool.request;
        if(typeof res['code']!== 'undefined' && res.code===0){
          var data = res.data;
          if(data){
            var url = "url('"+request.util.wrapServerName(data.url,true)+"')";
            this.$set(this.model,'background-image',url)
            if(!this.model['background-size']){
              this.$set(this.model,'background-size',"100% 100%");
            }
            this.$emit("change",this.model)
          }
        }
      }
    }
}
</script>

<style lang="scss">
.el-icon-delete{
  cursor: pointer;
  margin-left: 4px;
}

.mc-style .el-form-item--mini.el-form-item,.mc-style .el-form-item--small.el-form-item{
  margin-bottom: 10px;
}
.mc-style{
  .w-80{
    width: 80%!important;
  }
}
.header-icon{
  margin-left: 2px;
  color:#307AFF;
}
</style>
